import React, { useState, useRef } from 'react'
import Menu from '@/views/Menu'
import '@/assets/css/CouponInfo.scoped.css'

const Component = () =>
{
  let [coupon, SetCoupon] = useState({})
  let [receive, SetReceive] = useState([])
  let cid = React.params('cid') ?? 0
  let busid = React.business.id ?? 0

  React.useEffect(() => {
    CouponInfo()
  },[]) //这个空数值是依赖来源

  //请求优惠券详情
  const CouponInfo = async () => {
    var result = await React.request.post('coupon/info', {cid,busid})

    if(result.code == 0)
    {
      React.toast(result.msg, 'back', 'fail')
      return false
    }

    SetCoupon(result.data.coupon)
    SetReceive(result.data.receive)
  }
  
  //已领取用户列表轮播图
  const Swipers = () => {
    if(receive.length <= 0)
    {
      return(<></>)
    }
    return(
      <React.UI.Swiper
        autoplay={true}
        autoplayInterval={3000}
        loop={true}
        indicator={() => false}
        direction='vertical' 
        style={{ '--height': '40px', 'border':'0px' }}
      >
        {
          receive.map((item, key) => (
            <React.UI.Swiper.Item key={key}>
              <React.UI.NoticeBar style={{'border':'0px'}} content={`用户：${item.business.nickname} 在 ${item.createtime_text} 领取了优惠券`} color='info' />
            </React.UI.Swiper.Item>
          ))
        }
      </React.UI.Swiper>
    )

  }

  //领取请求
  const CouponGet = async () => {
    var result = await React.request.post('coupon/receive', {cid, busid})

    if(result.code == 0)
    {
      React.toast(result.msg, null, 'fail')
      return false
    }
    
    // coupon.receive = false
    // CouponInfo()

    SetCoupon({
      ...coupon,
      receive: false
    })

    React.toast(result.msg, null, 'success')
  }

  return (
    <>
      <React.UI.AutoCenter>
        <React.UI.Image src={coupon.thumb_text} width={'100%'} height={'200px'} fit='fill' />
      </React.UI.AutoCenter>

      {/* 领取列表 */}
      <Swipers />

      {/* 优惠券 */}
      <div className='coupon_detail'>
        <div className='coupon_info'>
          <div className="left">
              <div className="left_top">
                  <div><span>{coupon.rate ? coupon.rate * 100 : 1}</span>折</div>
                  <div className="top_info">
                      <div>优惠券</div>
                      <div>COUPON</div>
                  </div>
                  
                  <div className='have'>剩余{coupon.total}张</div>
              </div>
          </div>
          <div className="receive">
            { 
              coupon.receive ? (<React.UI.Button size="small" color='primary' onClick={CouponGet}>立即领取</React.UI.Button>) 
              : 
              (<React.UI.Button size="small" disabled color='warning'>已领取</React.UI.Button>)
            }
          </div>
        </div>
        <div className="coupon_prompt">
          <div className="prompt_title">温馨提示：</div>
          <div>
              <span>•</span>
              领取后 {coupon.createtime_text} 至 {coupon.endtime_text} 有效
          </div>
          <div><span>•</span>仅限量100张，赶快领取！</div>
        </div>
      </div>

      <Menu />
    </>
  )
}

export default Component